#include("common.html")
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商城</title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/vant.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <script type="text/javascript" src="#(tpath)/static/js/jquery.js"></script>
    <style type="text/css">
    .topTile {
	font-size: 16px;
	margin: 20px 4%;
	color: #333;
}

.couponList {
	margin-bottom: 63px;
}

.stamp {
	width: 89.3%;
	margin-bottom: 15px;
	margin-left: 3.6%;
	min-height: 120px;
	padding: 0 2%;
	position: relative;
	overflow: hidden;
	list-style: none;
	background: #4cb551;
	/* background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #4cb551 4px); */
	background-size: 12px 8px;
	background-position: 2%;
}

.stamp:before {
	background-color: #4cb551;
	left: 5px;
	right: 5px;
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: -1;
}

.stamp:after {
	content: '';
	position: absolute;
	left: 10px;
	top: 10px;
	right: 10px;
	bottom: 10px;
	box-shadow: 0 0 20px 1px rgb(255, 255, 255);
	z-index: -2;
}

.stamp .par {
	float: left;
	padding: 16px 7% 16px 2%;
	width: 54%;
	border-right: 2px dashed rgba(255, 255, 255, 0.3);
	text-align: left;
}

.stamp .copy {
	padding: 13px 2% 12px 4%;
	font-size: 24px;
	display: inline-block;
	width: 30%;
	vertical-align: text-bottom;
	color: rgb(255, 255, 255);
	text-align: center;
	line-height: initial;
}

.stamp .par text {
	position: relative;
	top: -5px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 15px;
}

.stamp .par span {
	font-size: 28px;
	color: #fff;
	margin-right: 5px;
	line-height: 45px;
}

.stamp .par div {
	color: #fff;
	font-size: 14px;
	line-height: 21px;
}

.stamp .copy div {
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 8px;
}

.stamp .copy .chooseNav {
	background-color: #fff;
	color: #333;
	font-size: 14px;
	text-decoration: none;
	padding: 5px 10px;
	border-radius: 3px;
	display: block;
}

.stamp i {
	position: absolute;
	left: 20%;
	top: 45px;
	height: 190px;
	width: 390px;
	background-color: rgba(255, 255, 255, 0.15);
	transform: rotate(-30deg);
}

.page .invalid {
	background: #827d76;
	background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #a9a6a0 4px);
	background-size: 12px 8px;
	background-position: 2%;
}

.page .invalid:before {
	background-color: #a9a6a0;
}

.bottom {
	width: 100%;
	position: fixed;
	bottom: 0px;
	color: #333;
	border-top: 1px solid #f1f1f1;
	text-align: center;
	font-size: 16px;
	line-height: 45px;
	background: #f9f9f9;
}
    </style>
  </head>
  
  <body class="">
    <style type="text/css">@media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125% !important; } } @media only screen and (min-width: 750px){ html { font-size: 150% !important; } } @media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } }</style>
    <!-- 样式 S -->
    <style type="text/css" lang="less">body{position: relative; font-size: 10px;} .fl{float:left;} .fr{float:right;} .clear{clear:both;} .miao-banner{display: block; width:100%;} .quan-title{margin:1rem 1.6rem 1rem 1.6rem;color:#999;font-size:1.2rem;} .quan-title span{color: #ee0a25;font-size:1.6rem;} .detail-top .van-icon-arrow-left{color:#333;} .quan-list{margin:1rem 1.6rem 1.6rem; background:#fff;border-radius:5px;} .quan-list img{display: block; width:5.3rem;height:5.3rem;margin-top:1rem;} .quan-L{position:relative; padding:1rem 0 1rem 1.6rem;} .quan-C{position: relative; padding:1rem 0 1rem 1rem;} .quan-C div{ margin-bottom:1rem; font-size:1.2rem; color:#333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .quan-unit{font-size:1.2rem;color:#ee0a25;margin-bottom:0.2rem;} .quan-price{margin:0 0.5rem 0 0.2rem;font-size:2rem;color:#ee0a25;font-weight:bold;} .quan-C p{margin:0.4rem 0 0 0; color:#999;font-size:1rem;} .time{margin-top:0.8rem;} .use{position: absolute;right:0.5rem;bottom:1rem;width:2rem;height:2rem;} .quan-R span,.quan-R2 span,.quan-R3 span{float:right;width:1.2rem;padding:1.3rem 1.2rem;display: inline-block;border-radius:0 5px 5px 0;color:#fff;} .quan-R span{background:#ee0a25;} .quan-R2 span{background:#f5900d;} .quan-R3 span{padding-top:2.2rem; background:#999999;} .quan-get .quan-price{color:#f5900d;} .quan-get .quan-R span{background:#f5900d;} .quan-get .quan-unit{color:#f5900d;} .quan-use .quan-price{color:#999;} .quan-use .quan-R span{background:#999;} .quan-use .quan-unit{color:#999;line-height:1.9;} .quan-use div{color:#999;} .quan-use .quan-R span{padding:2.5rem 1.2rem;} .quan-C .text-gray{color:#999;} .quan-L2{ position: absolute; top:2.1rem; left:1rem; width: 7rem; text-align: center; } .quan-L3{ position: absolute; left:1.6rem; width: 5.5rem; text-align: center; top: 2.7rem; font-weight: bold; font-size: 1.6rem; } .quan-L img{display: block; width: 5.4rem;height: 5.4rem;margin-top:1rem;} @media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125% !important; } } @media only screen and (min-width: 750px){ html { font-size: 150% !important; } } @media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } } .no-data{ width: 100%; height:100%; text-align: center; font-size: 12px; color: #d9d9d9; padding-top: 50px; }</style>
    <!-- 内容 -->
    <div id="coupon" class="container">
      <img src="#(base)/static/images/wx_bgcoupon.png" class="miao-banner">
      <div class="quan-title">
        <span>好券天天有</span>| 领神券，优惠看的见</div>
        
        #if(coupons?? && coupons.size()>0)
        <div class="couponList">
        
        		#for(coupon : coupons)
				<div class="stamp">
					<div class="par">
						<div>#(coupon.name)</div>
						<text class="sign">￥</text>
						<span>#(coupon.price)</span>
						<text>优惠券</text>
						<div>订单满#(coupon.miniprice)元</div>
					</div>
					<div class="copy">
						<div>#date(coupon.startTime,'yyyy-MM-dd')</div>
						<div>#date(coupon.endTime,'yyyy-MM-dd')</div>
						#if(session.session_member??)
						#if(checkCoupon(session.session_member.id,coupon.id))
						<a class="chooseNav" couponId="#(coupon.id)">领取</a>
						#else
						<div>已经领取</div>
						#end
						#else
						<a class="chooseNav" couponId="#(coupon.id)">领取</a>
						#end
					</div>
				</div>
				#end
			</div>
        #else
      <div class="no-data">
        <i class="van-icon van-icon-orders-o" style="color: rgb(217, 217, 217); font-size: 8rem;">
          <!---->
          <!----></i>
        <p>-- 暂无数据 --</p>
      </div>
      #end
    </div>
    <!-- 逻辑 -->
    <div class="van-toast van-toast--default van-toast--middle" style="z-index: 2000; display: none;">
      <!---->
      <!---->
      <div class="van-loading van-loading--circular van-loading--white" style="color: white;">
        <span class="van-loading__spinner van-loading__spinner--circular">
          <svg viewBox="25 25 50 50" class="van-loading__circular">
            <circle cx="50" cy="50" r="20" fill="none"></circle>
          </svg>
        </span>
      </div>
      <div class="van-toast__text">加载中...</div></div>
    <style>.van-tabbar{ height:55px; padding-bottom: 20px; } .suspend{ width: 100%; height: 100%; position: relative; z-index: 999; background-color: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; } .suspend-content{ width: 244px; height: 55px; position: fixed; top: 70%; z-index: 900; } .suspend-content-left{ width: 44px; height: 40px; background-color: rgba(0,0,0,.6); color: #fff; font-size: 8px; padding: 3px; box-sizing: border-box; border-top-left-radius:5px; border-bottom-left-radius:5px; margin-top: 10px; float: left; } .suspend-icon{ float: left; width: 10px; height: 30px; padding: 5px 0px; margin-right: 3px; font-size: 14px; } .suspend-navigation{ float: left; width: 25px; height: 30px; box-sizing: border-box; font-size: 10px; } .suspend-navigation2{ float: left; width: 25px; height: 30px; padding: 10px 0px; box-sizing: border-box; font-size: 10px; } .suspend-content-right{ width: 200px; height: 60px; background-color: #fff; float: left; border-top-left-radius:5px; border-bottom-left-radius:5px; padding: 15px 10px; box-sizing: border-box; } .suspend-content-right .van-col{ text-align: center; } .suspend-contact{ font-size: 20px; } .suspend-contact-text{ font-size: 10px; transform: scale(0.7); } .wechat-customer .wechat-bg{background:#333;opacity:0.5;width:100%;z-index:999;position:fixed;top:0;bottom:0;} .wechat-customer .wechat-cont{width:12rem;background:#fff;border-radius:5px;position:fixed;top:50%;left:50%;margin-left:-8rem;z-index:999;text-align:center;padding:2rem;margin-top:-10rem;} .wechat-customer .wechat-cont img{width:10rem;height:10rem;} .wechat-customer .wechat-cont .closewindow{position:absolute;right:1rem;top:1rem;} .wechat-customer .wechat-cont .button1{width: 12rem; height: 2rem; line-height: 2rem; border: 0px; margin: 0rem auto 0 auto; color: #999; font-size: 12px;} .wechat-customer .wechat-cont .button2{width:12.1rem;height:2rem;background:#2ba246;color:#fff;border:1px solid #2ba246;margin-top:0.5rem;} .icon-img{ border-radius: 50%; width: 50px; height: 50px; background-color: #fff; border: none; box-shadow: 0px 0px 10px 2px #e5e5e5; margin: -11px auto 0; position:relative; z-index:9999; line-height: 50px; align-items: center; display: table-cell; vertical-align: middle; } .icon-img img{ max-width: 50px; border-radius: 50%; } .van-tabbar-item__icon img{ height: auto; }</style>
    <!-- 底部内容-->
    <div id="footer">
        #include("footer.html")
    </div>
  </body>

</html>
<script type="text/javascript" src="#(tpath)/static/js/load.js"></script>
<script type="text/javascript">
$(".chooseNav").on("click",function(){
	var couponId = $(this).attr("couponId");
	$.ajax({
        url: "#(base)/coupon/receive",
        type: "post",
        data: {"couponId":couponId,},
        dataType: "json",
        success: function(res){
        	if(res.type=="success"){
       			alert("领取成功");
       			location.reload();
       		}else if(res.type=="error"){
       			alert(res.msg);
       		}else if(res.type=="warn"){
       			alert(res.msg);
       		}
        },
        error: function(res){
        }
    });
	
});
</script>